<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Authories" content="Java天下第一">
  <meta name="Robot" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  <title>互动聊天机器人</title>
  <style type="text/css"> 
  		*{margin:0;padding:0;}
		
		/* 总页面 */
  		body{
  			background-size: cover;  
  			font-family: "微软雅黑"; 
  			font-size: 8px;
  			color: #666 ;
  			margin: 0 auto;
  		}
		
		/* 图片设置 */
  		img{
  			border: none;
  		}

		/* 整个聊天窗口 */
  		.container{
	  		width: 1000px;
	 	  	height: 700px;
	    	background: #5896EF;
	    	margin: 80px auto;
	    	
		}

		/*header start logo与消息框间的边框*/
		.container .header{
			width: 100px;
			height: 60px;
			background:#5896EF;
			border-radius: 15px 15px 0px 0px; 
			position: relative; 
		}

		/* 企业logo */
		.header .logo{
			width: 300px;
			height: 60px;
			position: absolute;
			 /* bottom: 460px;  */
		}

		/*缩小按钮  */
		.hide #smaller {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 850px; 

		}

		/*退出按钮  */
		.hide #out {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 950px;
			
		}
		
		/*header end*/
		/* 问题列表 */
		.container .questions{
			width: 32.50%;
			height: 638px;
			float: right; 
			border: 1px solid black;
			/* 设置垂直滚动条显示 */
			overflow-x: hidden;
			overflow-y: scroll;
			scrollbar-arrow-color: rgb(136, 13, 29); 
			scrollbar-base-color: rgb(136, 13, 29);
		}

		.questions #sq{
			height: 35px;
			/* 设置垂直居中 得和元素高度一致*/
			line-height: 35px;
			border-bottom: 1.2px solid black ;
			font-size: 18px;
			/* 设置水平居中 */
			text-align:center;
			color: #FFF;
		}
		.questions #sq1 {
			height: 35px;
			border-bottom: 1.2px solid black ;
			font-size: 18px;
			text-align: right;
			color: #000000;
		}

		.questions  #sq2 {
			height: 37px;
			border-bottom: 1.2px solid black ;
			font-size: 18px;
			text-align: right;
			color: #000000;
		}

		.questions  #sq3{
			height: 37px;
			border-bottom: 1.2px solid black ;
			font-size: 18px;
			text-align: right;
			color: #000000;
		}



		/*center start  信息框*/
		.container .center{
			width: 65%;
			height: 500px;
			background: #5896EF;
			border: 1px solid black;
			padding: 10px;
			float: left;
			overflow-x: hidden;
			overflow-y: scroll;
		}
		/* 客服消息框 */
		.center .left{
			width: 100%;
			font-size: 16px;
			color:#000000;
		}
		/* 顾客消息框 */
		.center .right{
			width: 100%;
			font-size: 16px;
			color: #000000;
			text-align: right;
		}
		/* 查看聊天记录 */
		.center .charlist{
			text-align:center;
			padding: relative;
			top:500px;
		
		}
		
		/*center end*/

		/*send start*/
		.container .send{
			height: 120px;
		}

		/* 发送信息边框 */
		.send #sendContent{
			width: 400px;
			height: 70px;
			border: none;
			background-color: #5896EF;
			outline: medium;
		}
		
		/* 发送按钮的长方形淡蓝色区域 */
		.send .bottom{
			height: 50px;
			cursor: pointer;
		}

		/* 发送按钮 */
		.bottom #button{
			width: 100px;
			float: right;
			border: none;
			background: #33F;
			margin: 5px;
			color: #FFF;
			border-radius: 10px;
			height: 30px;
			outline:none;
			cursor: pointer;
		}
		/*send end*/
  </style> 
 </head>
 <body>
	<!-- 聊天窗口大框框 -->
	<div class="container">
		<!--header start-->
		<div class="header">
			<div class="logo" >
				<!-- TODO 企业login处  要实现上传图片接口-->
				<img onclick="" src="./images/logo.png" height="50px">
			</div>
			<div class="hide">
				<img id="smaller" onclick="PageSmall()" src="./images/smaller.png">
				<img id="out" value="关闭本页" onclick="Out()" src="./images/out.png">

			</div>
		</div>
		<!--header end-->
		
		<!--TODO center start 聊天信息展示框 要显示出历史聊天信息-->
		<div class="center">
			<div class="charlist">
				<button >查看更多聊天记录</button>
			</div>
			<!-- TODO 展示聊天信息 -->
			<div><span></span></div>
		</div>
		<!--center end-->
		<!--TODO 右侧问题列表 -->
		<!-- <div style="coolscrollbar" > -->
			<div class="questions">
				<div id="sq" >常见问题</div><br>
				<div id="sq1" onclick="sq()">怎么缴费? </div><br>
				<div id="sq2" onclick="sq()">怎么注册会员?  </div><br>
				<div id="sq3" onclick="sq()">怎么提高级别?  </div><br>
			</div>
		<!-- </div> -->
		<!--send start 消息编辑框-->
		<div class="send">
			<input type="text" id="sendContent" placeholder="请在此输入问题，输入字数不超过100个字符">
			<div class="bottom">
				<button id="button">发送</button>
			</div>
		</div>
		<!--send start-->
	</div>
	

	<script type="text/javascript" src="js/jquery-1.10.2.min.js">
	</script>
	<script type="text/javascript">
		
		//聊天信息的处理(打开窗口就执行的事件)
		$(function(){
			// 设置左边的客服默认首句回复
			var htmll = "<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>您好，欢迎访问我司网站，请问有什么可以帮您的吗？</span></div>"
			$(".center").append(htmll);
		});

		//实现缩小功能
		function PageSmall(){
			var zoomNum = 0.8;
			var $body = $('body');
			$body.css({
      		'-moz-transform': 'scale(' + zoomNum + ')',
     		 'transform-origin': 'center top'
     		});
     		$body.css('zoom', zoomNum);
		};

		
		function Out(){
			alert("您即将离开本页面");
			// window.close();
			window.location.replace("out.html");
		}

		// 实现点击默认问题  自动转换为聊天内容 并回复 的方法
		function sq (){
			var center2 = $(".center");
			//此处怎么实现动态获取内容                                需解决
			var content2 = $("#sq1").text();
			//alert(content2);
			var htmlr2 = "<div class='right'><span class='msg'>"+content2+"</span><img src='./images/job.jpg' width='50' height='50'></div>"
			//将客户发送消息以<div>标签形式追加到 center聊天信息展示框
			center2.append(htmlr2);
			$("#sendContent").val("");

			//生成左侧客服返回消息的html （得到来自api接口的内容 先用图灵机器人测试 到时候再换）  df190dc6d02749e28ad8a9e35b7415b4 
			$.ajax({
				type:"get",
				url:"http://www.tuling123.com/openapi/api?key=49de46c409c047d19b2ed2285e8775a6&info="+content2,
				success:function(result){
					var obj = result;
					var tmp = "<span>"+obj.text+"</span>"
					if (obj.url) {
						tmp+= "<a href='"+obj.url+"' target='_blank'>"+obj.text+"</a>"
					}

					//得到客服文字内容
					var htmll = "<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>"+tmp+"</span></div>"
					center2.append(htmll);
					center2.scrollTop(center2[0].scrollHeight);
				}
			});
        
		}

		// 点击发送按钮后发生的事件
		$("#button").click(function(){
			var content = $("#sendContent").val();
			var center = $(".center");
			// alert(content);
			
			// 设置右边客户发送消息html （要实现一个发消息接口）
			var htmlr = "<div class='right'><span class='msg'>"+content+"</span><img src='./images/job.jpg' width='50' height='50'></div>"
			//将客户发送消息以<div>标签形式追加到 center聊天信息展示框
			center.append(htmlr);
			$("#sendContent").val("");


			//生成左侧客服返回消息的html （得到来自api接口的内容 先用图灵机器人测试 到时候再换）  df190dc6d02749e28ad8a9e35b7415b4 
			$.ajax({
				type:"get",
				url:"http://www.tuling123.com/openapi/api?key=49de46c409c047d19b2ed2285e8775a6&info="+content,
				success:function(result){
					var obj = result;
					var tmp = "<span>"+obj.text+"</span>"
					if (obj.url) {
						tmp+= "<a href='"+obj.url+"' target='_blank'>"+obj.text+"</a>"
					}

					//得到客服文字内容
					var htmll = "<div class='left'><img src='./images/jimi.png' width='50' height='50'><span class='msg'>"+tmp+"</span></div>"
					center.append(htmll);
					center.scrollTop(center[0].scrollHeight);
				}
			});
		});

		
	</script>
 </body>
</html>
